import React from 'react';
import { Layout, Menu, Button } from 'antd';
import { Link, connect } from 'umi';
const { Header, Content, Footer } = Layout;
import logo from '../assets/logo.png';

function BasicLayout(props: any) {
  const logout = () => {
    props.dispatch({
      type: 'login/logout',
    });
  };

  return (
    <Layout style={{ height: '100%', fontFamily: 'global' }}>
      <Header>
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['1']}
          style={{ lineHeight: '64px' }}
        >
          <Menu.Item>
            <img src={logo} style={{ width: '60px' }} />
          </Menu.Item>
          <Menu.Item key="1">
            <Link to="map">地图看板</Link>
          </Menu.Item>
          <Menu.Item key="2">
            <Link to="all">分屏看板</Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Button onClick={logout}>Logout</Button>
          </Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: '0 20px', height: '100%' }}>
        <iframe
          src="http://47.113.118.122:9000/map.html"
          width="100%"
          height="100%"
          allow="autoplay; fullscreen"
        ></iframe>
        {/* <iframe src="http://localhost:9000/map.html" width="100%" height="100%" allow="autoplay; fullscreen"></iframe> */}
        {props.children}
      </Content>
      <Footer style={{ textAlign: 'center' }}>深高速AI监控平台</Footer>
    </Layout>
  );
}

export default connect()(BasicLayout);
